<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>仁爱宠物医院</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<style>
  a {
    text-decoration: none;
  }
  .home_div {
    width: 70%;
    height: 85%;
    margin: auto;
    margin-top: 3%;
    padding: 0 5%;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, .2);
  }
  #home{
    height: 100vh;
  }
</style>

<body>
  <div id="home">
    <el-menu class="el-menu-demo" mode="horizontal"
      background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
      <el-menu-item><span style="font-size: 20px; font-weight: 700;">宠物仁爱医院管理端</span></el-menu-item>
      <el-menu-item><a href="./home.html">首页</a></el-menu-item>
      <el-menu-item><a href="./user.html">会员管理</a></el-menu-item>
      <el-menu-item><a href="./goods.html">商品管理</a></el-menu-item>
      <el-menu-item><a href="./order.html">订单管理</a></el-menu-item>
      <el-menu-item><a href="./userinfo.html">个人信息</a></el-menu-item>
      <el-menu-item><a href="./message.html">留言管理</a></el-menu-item>
      <el-menu-item><a href="./contact.html">联系我们</a></el-menu-item>
      <el-menu-item><a href="./login.html">退出登录</a></el-menu-item>
    </el-menu>
    <div class="home_div">
      <h1 style="text-align: center; margin: 5% 0;">欢迎来到宠物仁爱医院的管理端</h1>
      <div class="container">
        <div class="row">
          <!-- 订单，商品，会员，联系我们，留言，收款 -->
          <div class="col-md-6" style="padding: 3%;">
            <div style="border: 1px solid #000; border-radius: 20px; display: flex; padding: 2%;">
              <img src="../img/dingdan.png" width="100px" alt="">
              <div style="margin-top: 3%;margin-left: 8%;">
                <h5>总订单数</h5>
                <h1 style="font-weight: 700;">{{ ruleForm.orderCount }}</h1>
              </div>
            </div>
          </div>
          <div class="col-md-6" style="padding: 3%;">
            <div style="border: 1px solid #000; border-radius: 20px; display: flex; padding: 2%;">
              <img src="../img/shangpin.png" width="100px" alt="">
              <div style="margin-top: 3%;margin-left: 8%;">
                <h5>总商品数</h5>
                <h1 style="font-weight: 700;">{{ ruleForm.goodsCount }}</h1>
              </div>
            </div>
          </div>
          <div class="col-md-6" style="padding: 3%;">
            <div style="border: 1px solid #000; border-radius: 20px; display: flex; padding: 2%;">
              <img src="../img/huiyuan.png" width="100px" alt="">
              <div style="margin-top: 3%;margin-left: 8%;">
                <h5>总会员数</h5>
                <h1 style="font-weight: 700;">{{ ruleForm.userCount }}</h1>
              </div>
            </div>
          </div>
          <div class="col-md-6" style="padding: 3%;">
            <div style="border: 1px solid #000; border-radius: 20px; display: flex; padding: 2%;">
              <img src="../img/lianxiwomen.png" width="100px" alt="">
              <div style="margin-top: 3%;margin-left: 8%;">
                <h5>总联系我们数</h5>
                <h1 style="font-weight: 700;">{{ ruleForm.contactCount }}</h1>
              </div>
            </div>
          </div>
          <div class="col-md-6" style="padding: 3%;">
            <div style="border: 1px solid #000; border-radius: 20px; display: flex; padding: 2%;">
              <img src="../img/duzheliuyan.png" width="100px" alt="">
              <div style="margin-top: 3%;margin-left: 8%;">
                <h5>总留言数</h5>
                <h1 style="font-weight: 700;">{{ ruleForm.messageCount }}</h1>
              </div>
            </div>
          </div>
          <div class="col-md-6" style="padding: 3%;">
            <div style="border: 1px solid #000; border-radius: 20px; display: flex; padding: 2%;">
              <img src="../img/shoukuanma-.png" width="100px" alt="">
              <div style="margin-top: 3%;margin-left: 8%;">
                <h5>总订单金额数</h5>
                <h1 style="font-weight: 700; color: red;">{{ ruleForm.orderPrice }}￥</h1>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
  new Vue({
    el: '#home',
    data() {
      return {
        ruleForm: {},
      };
    },
    created() {
      // 要先确保用户已经登录
      if(localStorage.getItem("userId") == null){
        // 表示没有登录，跳转到登录页面
        window.location.href = './login.html';
        return;
      }
      // 页面加载时调用
      this.page_init();
    },
    methods: {
      async page_init() {
        const {data : result} = await this.$http.get('http://localhost:8082/home');
        // 设置值
        this.ruleForm = result.l;
      }
    }
  })
</script>

</html>